<html>
<head>
<link href="../../../Objects/sofa_white.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="contenu">
		
		<center><h3>Advanced Shader (7/7)</h3>
		  <br><br>
		  <img src="6_Visual.png" name="Visu_start" align="middle" width=300>
		</center>

		
		<br><div id="orangeText">Description</div>
		<p>This follows the previous part on Shader, but now we will see how to use it more efficiently.</p>
        
		<div id="orangeText">Key points</div>
        
		<p>We have seen how to call a Shader, but we may need to send uniform values to the Shader in order to change parameters on the fly.
		This can be done with a set of objects called <b>Ogl{Type}{Size}Variable</b>. They can handle a lot of different formats : vectors, matrices, array of vectors in int and float types (see components/visualmodel/OglVariable.h for a list of available types).</p>
		
        <p>Texture can be also given to the Shader, using <b>OglTexture</b>, which has a lot of parameters available; but the most important one is the texture unit id.</p>
		
		<p>Another problem arises if you want to mix different effects (for example: toon shading and normal mapping).
		You can write a big Shader that does a lot of things, and activate only what you want with a system of macro.</p>
        
        <div id="tutorialAction"><p>In your favorite editor, open <strong>/Sofa/share/shaders/generalRenderingShader.vert</strong> and <strong>/Sofa/share/shaders/generalRenderingShader.frag</strong>.</p>
        
        <p>In the .frag file, look at <strong>line 85</strong>. This section defines the variables that are needed to execute the <strong>Perlin Noise Bump</strong> effect.</p>
        <p>Now look at <strong>line 369</strong>. This section executes the <strong>Perlin Noise Bump</strong> effect.</p></div>
        
        <p>Notice for either of these sections to be compiled, the variable <strong>PERLIN_NOISE_BUMP</strong> must be defined. We can define this variable, and the other variables that are needed for this effect, directly in the scene graph.</p>
        
        <div id="tutorialAction"><p>In the <strong>OglShader</strong> component, change to <strong>vertFilename</strong> and the <strong>fragFilename</strong> to "/Sofa/share/shaders/generalrenderingshader.vert" and "/Sofa/share/shaders/generalrenderingshader.frag"</p>
        
        <p>Add a <strong>OglShaderDefineMacro</strong> component, and change the name to "PHONG".</p></div>
        
        <p>This will give the same basic shading as in the last step.</p>
        
        <div id="tutorialAction"><p>Add a <strong>OglShaderDefineMacro</strong> component, and change the name to "PERLIN_NOISE_BUMP".</p>
        
        <p>Add three <strong>OglFloatVariables</strong>, and name them "perlinBumpFrequency", "perlinBumpFactor" and "perlinBumpPersistance". Set their <strong>Uniform Value</strong> properties to "6", "0.9" and "0.2" respectively.</p>
        <p>Add a <strong>OglIntVariable</strong> component and name it "perlinBumpOctave". Set the <strong>Uniform Value</strong> to "1".</p>
        
        <p>Run in SOFA.</p></div>
        
        <p>We have defined all the variables for the pattern of the dragon. Now we will define the color.</p>
        
        <p>You can define a macro by giving it the same name as the variable, like we did above, or by setting the <strong>ID name</strong>.</p>
        
        <div id="tutorialAction"><p>Add a <strong>OglShaderDefineMacro</strong> component, and set the <strong>ID name</strong> to "PERLIN_NOISE_COLOR".</p>
        
        <p>Add a <strong>perlinFloat4Variables</strong>, naming it "perlinColorFactor" and setting the <strong>Uniform Value</strong> to (0.2 0.9 0 0).</p>
        
        <p>Add two <strong>OglFloatVariables</strong>. Name one "perlinColorFrequency" and give it a <strong>Uniform Value</strong> of "0.5". Name the other "perlinColorPersistance"and give it a <strong>Uniform Value</strong> of "0.5".</p>
        
        <p>Add a <strong>OglIntVariable</strong> named "perlinColorOctave" with a <strong>Uniform Value</strong> of "3".</p>
        
        <p>Run in SOFA.</p></div>
        
     	<p>Lastly, we can add a texture to the dragon.</p>
        
		<p>The Perlin texture requires a lot of values, too many to enter by hand. We will cheat a bit.</p>
        
        <div id="tutorialAction"><p>Open your scene in your favorite XML editor. Copy the bold text below, and paste it into your scene, right before <strong>&lt;/Node&gt;</strong>.</p></div>
        
		<p><strong>&lt;OglTexture2D id="perlinPermutationsTexture" proceduralTextureNbBits="8" proceduralTextureWidth="1" proceduralTextureHeight="256" repeat="true" linearInterpolation="false" proceduralTextureData="151 160 137 91 90 15 
													   131 13 201 95 96 53 194 233 7 225 140 36 103 30 69 142 8 99 37 240 21 10 23 
													   190  6 148 247 120 234 75 0 26 197 62 94 252 219 203 117 35 11 32 57 177 33 
													   88 237 149 56 87 174 20 125 136 171 168  68 175 74 165 71 134 139 48 27 166 
													   77 146 158 231 83 111 229 122 60 211 133 230 220 105 92 41 55 46 245 40 244 
													   102 143 54  65 25 63 161  1 216 80 73 209 76 132 187 208  89 18 169 200 196 
													   135 130 116 188 159 86 164 100 109 198 173 186  3 64 52 217 226 250 124 123 
													   5 202 38 147 118 126 255 82 85 212 207 206 59 227 47 16 58 17 182 189 28 42 
													   223 183 170 213 119 248 152  2 44 154 163  70 221 153 101 155 167  43 172 9 
													   129 22 39 253  19 98 108 110 79 113 224 232 178 185  112 104 218 246 97 228 
													   251 34 242 193 238 210 144 12 191 179 162 241  81 51 145 235 249 14 239 107 
													   49 192 214  31 181 199 106 157 184  84 204 176 115 121 50 45 127  4 150 254 
													   138 236 205 93 222 114 67 29 24 72 243 141 128 195 78 66 215 61 156 180"  /&gt;</strong>
             </p>        
        
        <div id="tutorialAction"><p>Save your file, and re-open it in the Modeler. Run in SOFA.</p></div>
        
	</div>
</body>
</html>
